<style scoped language="less">
  .computed {
    width: 100vw;
    height: 300px;
    border: 3px solid #111;
  }
  input {
    width: 100vw;
  }
</style>
<template>
  <div class="about">
    <div class="computed">
      <h5>{{ comShowTitle }}</h5>
      <input type="text" v-model="comTitle" />
    </div>
    <div class="computed">
      <h5>{{ watchShowTitle }}</h5>
      <input type="text" v-model="watchTtitle" />
    </div>
    <div class="computed">
      <h5>{{ watchShowTitleEvent() }}</h5>
      <input type="text" v-model="titleEvent" />
    </div>
    <div class="computed">
      <h5>{{ dapengGetters }}</h5>
    </div>
    <div class="computed">
      <h5>{{ dapeng }}</h5>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  computed: {
    comShowTitle () {
      return this.comTitle.split('')
    },
    ...mapGetters([
      'dapengGetters'
    ]),
    ...mapState([
      'dapeng'
    ])
  },
  watch: {
    watchTtitle: function (newTitle, oldTitle) {
      this.watchShowTitle = newTitle.split('')
    }
  },
  data () {
    return {
      comTitle: 'This is an about page',
      watchTtitle: 'newTitle',
      watchShowTitle: 'watchShowTitle',
      titleEvent: 'titleEvent'
    }
  },
  methods: {
    ...mapActions([
      'queryDapengAction'
    ]),
    watchShowTitleEvent () {
      return this.titleEvent.split('')
    }
  },
  created () {
    this.queryDapengAction()
  }
}
</script>
